<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/marketingPlay' }"> <i class="el-icon-lx-cascades"></i> 营销玩法 </el-breadcrumb-item>
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 推广员 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="extend_tabs">
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="推广员设置" name="set">
                    <div class="form-files-box">
                        <div class="form-files">
                            <div class="form-file">
                                <span class="form-label">是否启用推广员</span>
                                <span class="form-set f13">{{ promoterSetList.promoter_config.status == 0 ? '禁用' : '启用' }}</span>
                                <span class="form-set-detail f13">是否启用推广员</span>
                                <span class="form-edit">
                                    <el-switch
                                        @change="enable($event)"
                                        v-model="switch_enable"
                                        :active-value="1"
                                        :inactive-value="0"
                                        :width="53"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                    >
                                    </el-switch>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">申请推广员条件</span>
                                <span class="form-set f13">消费金额：{{ promoterSetList.promoter_config.condition.price }} 元</span>
                                <span class="form-set-detail f13">申请成为推广员的条件设置</span>
                                <span class="form-edit">
                                    <el-button @click="application_conditions" type="success" size="mini" round>设置</el-button>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">推广员申请是否审核</span>
                                <span class="form-set f13">{{ promoterSetList.promoter_config.apply == 0 ? '不需要' : '需要' }}</span>
                                <span class="form-set-detail f13">推广员申请是否手动审核开通，建议关闭</span>
                                <span class="form-edit">
                                    <el-switch
                                        @change="examine($event)"
                                        v-model="switch_examine"
                                        :active-value="1"
                                        :inactive-value="0"
                                        :width="53"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                    >
                                    </el-switch>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">自定义推广员名称</span>
                                <span class="form-set f13">{{ promoterSetList.promoter_config.title ? '已设置' : '未设置' }}</span>
                                <span class="form-set-detail f13">自定义推广员名称，如：分享大使</span>
                                <span class="form-edit">
                                    <el-button @click="custom_name" type="success" size="mini" round>设置</el-button>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">推广有效天数设置</span>
                                <span class="form-set f13">{{
                                    promoterSetList.promoter_config.effective_days
                                        ? `已设置 ${promoterSetList.promoter_config.effective_days} 天`
                                        : '未设置'
                                }}</span>
                                <span class="form-set-detail f13">推广员推广有效天数设置</span>
                                <span class="form-edit">
                                    <el-button @click="effective_days_set" type="success" size="mini" round>设置</el-button>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">推广员等级/佣金设置</span>
                                <span class="form-set f13">已设置</span>
                                <span class="form-set-detail f13">推广员佣金比例设置，请输入相应百分比，单位：%</span>
                                <span class="form-edit">
                                    <el-button @click="commission_set" type="success" size="mini" round>设置</el-button>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">推广员规则（协议）设置</span>
                                <span class="form-set f13">{{ promoterSetList.promoter_config.content ? '已设置' : '未设置' }}</span>
                                <span class="form-set-detail f13">推广员规则（协议）设置</span>
                                <span class="form-edit">
                                    <el-button @click="rule_set" type="success" size="mini" round>设置</el-button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-files-box">
                        <div class="form-file header">提现设置</div>
                        <div class="form-files">
                            <div class="form-file">
                                <span class="form-label">提现开关</span>
                                <span class="form-set f13">{{ promoterSetList.withdraw_config.status == 0 ? '禁用' : '启用' }}</span>
                                <span class="form-set-detail f13">是否允许推广员提现，可临时关闭</span>
                                <span class="form-edit">
                                    <el-switch
                                        @change="withdraw($event)"
                                        v-model="withdraw_status"
                                        :active-value="1"
                                        :inactive-value="0"
                                        :width="53"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                    >
                                    </el-switch>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">每日提现次数设置</span>
                                <span class="form-set f13">{{
                                    promoterSetList.withdraw_config.number
                                        ? `已设置 ${promoterSetList.withdraw_config.number} 次`
                                        : '未设置'
                                }}</span>
                                <span class="form-set-detail f13">同一推广员每日可提现次数设置</span>
                                <span class="form-edit">
                                    <el-button @click="withdrawal_times_set" type="success" size="mini" round>设置</el-button>
                                </span>
                            </div>
                            <div class="form-file">
                                <span class="form-label">提现金额设置</span>
                                <span class="form-set f13">{{
                                    promoterSetList.withdraw_config.low_fee && promoterSetList.withdraw_config.high_fee
                                        ? `已设置 ${
                                              promoterSetList.withdraw_config.low_fee + '|' + promoterSetList.withdraw_config.high_fee
                                          }`
                                        : '未设置'
                                }}</span>
                                <span class="form-set-detail f13">推广员提现时的最低额和最高额设置</span>
                                <span class="form-edit">
                                    <el-button @click="withdrawal_money_set" type="success" size="mini" round>设置</el-button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- 所有设置弹框 -->
                    <!-- 申请条件 -->
                    <el-dialog title="推广员申请条件设置" :visible.sync="application_conditions_dialog" width="30%">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="最低消费金额">
                                <el-input v-model="form.promoter_condition_price"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- 自定义名称 -->
                    <el-dialog title="自定义推广员名称设置" :visible.sync="custom_name_dialog" width="30%">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="推广员名称">
                                <el-input v-model="form.promoter_title"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- 有效天数 -->
                    <el-dialog title="推广有效天数设置" :visible.sync="effective_days_dialog" width="30%">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="有效天数">
                                <el-input v-model="form.effective_days"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- 佣金 -->
                    <el-dialog title="推广员佣金设置" :visible.sync="commission_set_dialog" width="30%">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="启用级别">
                                <el-radio-group v-model="form.grade">
                                    <el-radio :label="1">一级推广员</el-radio>
                                    <el-radio :label="2">二级推广员</el-radio>
                                    <el-radio :label="3">三级推广员</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="一级佣金">
                                <el-input v-model="form.grade1"></el-input>
                            </el-form-item>
                            <el-form-item label="二级佣金" v-if="form.grade == 2">
                                <el-input v-model="form.grade2"></el-input>
                            </el-form-item>
                            <el-form-item label="二级佣金" v-if="form.grade == 3">
                                <el-input v-model="form.grade2"></el-input>
                            </el-form-item>
                            <el-form-item label="三级佣金" v-if="form.grade == 3">
                                <el-input v-model="form.grade3"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- 规则 -->
                    <el-dialog title="推广员规则（协议）设置" :visible.sync="rule_set_dialog" width="30%">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="详情描述">
                                <el-input v-model="form.content" type="textarea" :rows="2"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- 提现次数 -->
                    <el-dialog title="提现次数设置" :visible.sync="withdrawal_times_dialog" width="30%">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="每日提现次数">
                                <el-input v-model="form.withdraw_number"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                    <!-- 提现金额 -->
                    <el-dialog title="提现金额设置" :visible.sync="withdrawal_money_dialog" width="30%">
                        <el-form ref="form" label-width="100px">
                            <el-form-item label="最低额度">
                                <el-input v-model="form.withdraw_low_fee"></el-input>
                            </el-form-item>
                            <el-form-item label="最高额度">
                                <el-input v-model="form.withdraw_high_fee"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="推广员列表" name="list">
                    <div class="container1">
                        <div class="handle-box">
                            <!-- <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除</el-button> -->
                            <el-input v-model="query.keyword" placeholder="输入推广员名称" class="handle-input mr10"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                        <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                            <el-table-column prop="name" label="推广员头像">
                                <template slot-scope="scope">
                                    <img :src="scope.row.avatar" alt="" class="info-image" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="nickname" label="推广员名称"></el-table-column>
                            <el-table-column prop="money" label="累计佣金总额">
                                <template slot-scope="scope">
                                    <span class="red">￥{{ scope.row.total }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="money" label="余额">
                                <template slot-scope="scope">
                                    <span class="red">￥{{ scope.row.charges }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">{{ scope.row.status == 0 ? '禁用' : '启用' }}</template>
                            </el-table-column>
                            <el-table-column prop="create_time" label="加入时间"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-button @click="disable(scope.row.uid, scope.row.status)" type="warning" size="mini">{{
                                            scope.row.status == 0 ? '禁用' : '启用'
                                        }}</el-button>
                                        <el-button @click="deleteRow(scope.row.uid, scope.$index)" type="danger" size="mini"
                                            >删除</el-button
                                        >
                                    </el-row>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total, prev, pager, next"
                                :current-page="query.page"
                                :page-size="query.rows"
                                :total="pageTotal"
                                @current-change="handlePageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="推广订单" name="order">
                    <div class="container1">
                        <div class="handle-box">
                            <el-input v-model="query.keyword" placeholder="输入订单号" class="handle-input mr10"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                        <el-table
                            :data="orderTableData"
                            class="orderTable"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            :expand-row-keys="expends"
                            :row-key="getRowKeys"
                        >
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-form label-position="top" inline class="demo-table-expand" v-if="scope.row.promoter_info_leval_1">
                                        <span class="mr50">一级推广员</span>
                                        <el-form-item label="流水号：">
                                            <span>{{ scope.row.promoter_info_leval_1.order_no }}</span>
                                        </el-form-item>
                                        <el-form-item>
                                            <img :src="scope.row.promoter_info_leval_1.avatar" class="info-image-mini" alt="" />
                                            <span style="vertical-align: top">{{ scope.row.promoter_info_leval_1.nickname }}</span>
                                        </el-form-item>
                                        <el-form-item label="佣金：">
                                            <span class="red">{{ '¥ ' + scope.row.promoter_info_leval_1.price }}</span>
                                        </el-form-item>
                                    </el-form>
                                    <el-form label-position="top" inline class="demo-table-expand" v-if="scope.row.promoter_info_leval_2">
                                        <span class="mr50">二级推广员</span>
                                        <el-form-item label="流水号：">
                                            <span>{{ scope.row.promoter_info_leval_2.order_no }}</span>
                                        </el-form-item>
                                        <el-form-item>
                                            <img :src="scope.row.promoter_info_leval_2.avatar" class="info-image-mini" alt="" />
                                            <span style="vertical-align: top">{{ scope.row.promoter_info_leval_2.nickname }}</span>
                                        </el-form-item>
                                        <el-form-item label="佣金：">
                                            <span class="red">{{ '¥ ' + scope.row.promoter_info_leval_2.price }}</span>
                                        </el-form-item>
                                    </el-form>
                                    <el-form label-position="top" inline class="demo-table-expand" v-if="scope.row.promoter_info_leval_3">
                                        <span class="mr50">三级推广员</span>
                                        <el-form-item label="流水号：">
                                            <span>{{ scope.row.promoter_info_leval_3.order_no }}</span>
                                        </el-form-item>
                                        <el-form-item>
                                            <img :src="scope.row.promoter_info_leval_3.avatar" class="info-image-mini" alt="" />
                                            <span style="vertical-align: top">{{ scope.row.promoter_info_leval_3.nickname }}</span>
                                        </el-form-item>
                                        <el-form-item label="佣金：">
                                            <span class="red">{{ '¥ ' + scope.row.promoter_info_leval_3.price }}</span>
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>

                            <el-table-column prop="order_no" label="订单号"></el-table-column>
                            <el-table-column label="订单信息" width="300">
                                <template slot-scope="scope">
                                    <div class="course-info-wrapper">
                                        <div class="img-wrapper">
                                            <img :src="scope.row.order_info.product.cover" alt="" class="info-image" />
                                        </div>
                                        <div class="info-detail">
                                            <div class="title">
                                                <span>{{ scope.row.order_info.product.title }}</span>
                                            </div>

                                            <span class="product_type">{{ scope.row.order_info.product.product_type }}</span>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="order_info.nickname" label="用户"></el-table-column>
                            <el-table-column label="订单金额">
                                <template slot-scope="scope">
                                    <span class="red">{{ '¥ ' + scope.row.paid_fee }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="create_time" label="下单时间"></el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total, prev, pager, next"
                                :current-page="query.page"
                                :page-size="query.rows"
                                :total="orderPageTotal"
                                @current-change="handlePageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="佣金收入" name="commission">
                    <div class="container1">
                        <div class="handle-box">
                            <el-input v-model="query.keyword" placeholder="输入流水号" class="handle-input mr10"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                        <el-table :data="commissionTableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-form label-position="top" inline class="demo-table-expand">
                                        <el-form-item label="订单号：">
                                            <span>{{ scope.row.order_info.order_no }}</span>
                                        </el-form-item>
                                        <el-form-item label="用户：">
                                            <span>{{ scope.row.order_info.nickname }}</span>
                                        </el-form-item>
                                        <el-form-item
                                            :label="`【${scope.row.order_info.product.product_type}】${scope.row.order_info.product.title}`"
                                        >
                                        </el-form-item>
                                        <el-form-item label="订单金额：">
                                            <span class="red">￥{{ scope.row.order_info.paid_fee }}</span>
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="推广员头像">
                                <template slot-scope="scope">
                                    <img :src="scope.row.avatar" alt="" class="info-image" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="nickname" label="推广员名称"></el-table-column>
                            <el-table-column prop="flow_no" label="流水号"></el-table-column>
                            <el-table-column label="收入金额">
                                <template slot-scope="scope">
                                    <span class="red">￥{{ scope.row.price }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">{{ scope.row.status == 0 ? '进行中' : '完成' }}</template>
                            </el-table-column>
                            <el-table-column prop="create_time" label="时间"></el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total, prev, pager, next"
                                :current-page="query.page"
                                :page-size="query.rows"
                                :total="commissionPageTotal"
                                @current-change="handlePageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="提现管理" name="withdrawal">
                    <div class="container1">
                        <div class="handle-box">
                            <el-input v-model="query.keyword" placeholder="输入提现单号" class="handle-input mr10"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                        <el-table :data="withdrawalTableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column prop="order_no" label="提现单号"></el-table-column>
                            <el-table-column prop="name" label="提现人头像">
                                <template slot-scope="scope">
                                    <img :src="scope.row.avatar" alt="" class="info-image" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="nickname" label="提现人名称"></el-table-column>

                            <el-table-column label="提现金额">
                                <template slot-scope="scope">
                                    <span class="red">￥{{ scope.row.price }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">{{
                                    scope.row.paid == -1 ? '已拒绝' : scope.row.paid == 0 ? '等待支付' : '提现成功'
                                }}</template>
                            </el-table-column>
                            <el-table-column prop="create_time" label="提现时间"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-row v-if="scope.row.paid !== 1">
                                        <el-button v-if="scope.row.paid == 0" @click="refuse(scope.row.id)" type="warning" size="mini"
                                            >拒绝</el-button
                                        >
                                        <el-button v-if="scope.row.paid == 0" @click="confirmPay(scope.row.id)" type="success" size="mini"
                                            >确认支付</el-button
                                        >
                                        <el-button @click="withdrawDel(scope.row.id, scope.$index)" type="danger" size="mini"
                                            >删除</el-button
                                        >
                                    </el-row>
                                    <el-button v-else type="text">提现成功</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total, prev, pager, next"
                                :current-page="query.page"
                                :page-size="query.rows"
                                :total="withdrawPageTotal"
                                @current-change="handlePageChange"
                            ></el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="推广日志" name="log">
                    <el-table :data="logTableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                        <el-table-column label="推广员头像">
                            <template slot-scope="scope">
                                <img :src="scope.row.promoter_avatar" alt="" class="info-image" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="promoter_nickname" label="推广员名称"></el-table-column>
                        <el-table-column label="用户头像">
                            <template slot-scope="scope">
                                <img :src="scope.row.avatar" alt="" class="info-image" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="nickname" label="用户名称"></el-table-column>
                        <el-table-column prop="create_time" label="创建时间"></el-table-column>
                        <el-table-column prop="end_time" label="有效时间"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import {
    promoterSetData,
    promoterSetEditData,
    promoterListData,
    promoterStatusData,
    delPromoterData,
    promoterOrderListData,
    capitalflowListData,
    promoterWithdrawListData,
    withdrawPayData,
    withdrawDelData,
    promoterRecordListData
} from '../../api/index';
export default {
    // name: 'Promoter',
    data() {
        return {
            query: {
                page: 1,
                rows: 4,
                keyword: ''
            },
            activeName: 'set',
            promoterSetList: {},
            switch_enable: '',
            switch_examine: '',
            withdraw_status: '',
            application_conditions_dialog: false,
            custom_name_dialog: false,
            effective_days_dialog: false,
            commission_set_dialog: false,
            rule_set_dialog: false,
            withdrawal_times_dialog: false,
            withdrawal_money_dialog: false,
            form: {
                promoter_condition_price: '',
                promoter_title: '',
                effective_days: '',
                grade: '',
                grade1: '',
                grade2: '',
                grade3: '',
                content: '',
                withdraw_number: '',
                withdraw_low_fee: '',
                withdraw_high_fee: ''
            },
            tableData: [],
            orderTableData: [],
            withdrawalTableData: [],
            commissionTableData: [],
            logTableData: [],
            // multipleSelection: [],
            // delList: [],
            expends: [],
            pageTotal: 0,
            orderPageTotal: 0,
            withdrawPageTotal: 0,
            commissionPageTotal: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        enable($event) {
            this.$confirm(`确定${$event == 0 ? '禁用' : '启用'}吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                promoterSetEditData({ promoter_status: $event }).then((res) => {
                    if (res.code == 1) {
                        if ($event == false) {
                            this.$message({
                                type: 'error',
                                message: '禁用成功!'
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '启用成功!'
                            });
                        }
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        examine($event) {
            this.$confirm(`确定${$event == 0 ? '禁用' : '启用'}吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                promoterSetEditData({ apply: $event }).then((res) => {
                    if (res.code == 1) {
                        if ($event == false) {
                            this.$message({
                                type: 'error',
                                message: '禁用成功!'
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '启用成功!'
                            });
                        }
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        withdraw($event) {
            this.$confirm(`确定${$event == 0 ? '禁用' : '启用'}吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                promoterSetEditData({ withdraw_status: $event }).then((res) => {
                    if (res.code == 1) {
                        if ($event == false) {
                            this.$message({
                                type: 'error',
                                message: '禁用成功!'
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '启用成功!'
                            });
                        }
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        application_conditions() {
            this.application_conditions_dialog = true;
        },
        custom_name() {
            this.custom_name_dialog = true;
        },
        effective_days_set() {
            this.effective_days_dialog = true;
        },
        commission_set() {
            this.commission_set_dialog = true;
        },
        rule_set() {
            this.rule_set_dialog = true;
        },
        withdrawal_times_set() {
            this.withdrawal_times_dialog = true;
        },
        withdrawal_money_set() {
            this.withdrawal_money_dialog = true;
        },
        //取消
        cancel() {
            this.application_conditions_dialog = false;
            this.custom_name_dialog = false;
            this.effective_days_dialog = false;
            this.commission_set_dialog = false;
            this.rule_set_dialog = false;
            this.withdrawal_times_dialog = false;
            this.withdrawal_money_dialog = false;
        },
        //确定
        save() {
            promoterSetEditData(this.form).then((res) => {
                if (res.code == 1) {
                    this.cancel();
                    this.$message.success('设置成功');
                    setTimeout(() => {
                        location.reload();
                    }, 200);
                }
            });
        },
        // 推广员设置  推广员列表
        getData() {
            promoterSetData().then((res) => {
                this.promoterSetList = res.data;
                this.switch_enable = res.data.promoter_config.status;
                this.switch_examine = res.data.promoter_config.apply;
                this.withdraw_status = res.data.withdraw_config.status;
                this.form.promoter_condition_price = res.data.promoter_config.condition.price;
                this.form.promoter_title = res.data.promoter_config.title;
                this.form.effective_days = res.data.promoter_config.effective_days;

                this.form.grade = res.data.promoter_config.grade;
                this.form.grade1 = res.data.promoter_config.grade1;
                this.form.grade2 = res.data.promoter_config.grade2;
                this.form.grade3 = res.data.promoter_config.grade3;

                this.form.content = res.data.promoter_config.content;
                this.form.withdraw_number = res.data.withdraw_config.number;
                this.form.withdraw_low_fee = res.data.withdraw_config.low_fee;
                this.form.withdraw_high_fee = res.data.withdraw_config.high_fee;
            });
            promoterListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
            promoterOrderListData(this.query).then((res) => {
                this.orderTableData = res.data.list;
                this.orderPageTotal = res.data.count;
                let Id = this.orderTableData.map((item) => item.id);
                this.expends = Id;
            });
            capitalflowListData(this.query).then((res) => {
                this.commissionTableData = res.data.list;
                this.commissionPageTotal = res.data.count;
            });
            promoterWithdrawListData(this.query).then((res) => {
                this.withdrawalTableData = res.data.list;
                this.withdrawPageTotal = res.data.count;
            });
            promoterRecordListData().then((res) => {
                this.logTableData = res.data.list;
            });
        },
        getRowKeys(row) {
            return row.id;
        },
        // 多选操作
        // handleSelectionChange(val) {
        //     this.multipleSelection = val;
        // },
        //批量删除
        // delAllSelection() {
        //     const length = this.multipleSelection.length;
        //     let str = '';
        //     this.delList = this.delList.concat(this.multipleSelection);
        //     for (let i = 0; i < length; i++) {
        //         str += this.multipleSelection[i].name + ' ';
        //     }
        //     this.$message.error(`删除了${str}`);
        //     this.multipleSelection = [];
        // },
        // 搜索
        handleSearch() {
            this.$set(this.query);
            this.getData();
        },
        //禁用
        disable(uid, status) {
            this.$confirm(`确定${status == 0 ? '启用' : '禁用'}吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                promoterStatusData({ uid: uid, status: status == 0 ? 1 : 0 }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('成功');
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        //删除
        deleteRow(uid, index) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                delPromoterData({ uid: uid }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        refuse(id) {
            this.$confirm('确定要拒绝吗？', '提示', {
                type: 'warning'
            }).then(() => {
                withdrawPayData({ id: id, paid: -1 }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('拒绝成功');
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        confirmPay(id) {
            this.$confirm('确定要支付吗？', '提示', {
                type: 'warning'
            }).then(() => {
                withdrawPayData({ id: id, paid: 1 }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('支付成功');
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        withdrawDel(id, index) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                withdrawDelData({ id: id }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('删除成功');
                        this.withdrawalTableData.splice(index, 1);
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.extend_tabs {
    padding: 20px;
}
/* 推广员设置 */
.form-files-box {
    line-height: 1;
    margin-bottom: 50px;
}
.form-files-box .form-file {
    display: flex;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #e8e9eb;
    color: #4c4c4c;
    line-height: 40px;
}
.form-label,
.form-set,
.form-set-detail {
    flex: 0.3;
    font-size: 14px;
}
.f13 {
    font-size: 13px;
    color: #999;
}
.form-edit {
    flex: 0.1;
    text-align: right;
}
.form-files-box .form-file.header {
    background-color: #f0f0f0;
    font-weight: 600;
    color: #999;
    line-height: 1;
}
/* 推广员列表 */
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
.info-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.info-image-mini {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.course-info-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    padding-right: 58px;
    text-align: left;
    cursor: pointer;
}
.course-info-wrapper .img-wrapper {
    position: relative;
}
.course-info-wrapper .info-image {
    width: 80px;
    height: 64px;
    border-radius: 4px;
}
.course-info-wrapper .info-detail {
    line-height: 1.5;
    height: 100%;
    margin-left: 8px;
}
.course-info-wrapper .info-detail .title {
    max-width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.course-info-wrapper .info-detail .product_type {
    display: inline-block;
    padding: 0 5px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}
.red {
    color: #ea644a;
}
</style>

<style>
.demo-table-expand {
    height: 20px;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 25%;
}
.el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
    line-height: 0;
}
.demo-table-expand .el-form-item__label {
    line-height: 20px;
}
.demo-table-expand span {
    line-height: 20px;
}
.table .el-table__expand-icon {
    font-size: 15px;
    color: #000;
}

/* 订单 */
.mr50 {
    margin-right: 20%;
}
.orderTable .demo-table-expand {
    height: 20px;
}
.orderTable .demo-table-expand label {
    /* width: 90px; */
    color: #99a9bf;
}
.orderTable .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 25%;
}
.orderTable .el-table__expand-column {
    pointer-events: none;
}
.orderTable .el-table__expand-column .el-icon {
    visibility: hidden;
}
.orderTable .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
    line-height: 0;
}
.orderTable .demo-table-expand .el-form-item__label {
    line-height: 20px;
}
.orderTable .demo-table-expand span {
    line-height: 20px;
}
.orderTable .el-table__expanded-cell {
    background: #f7f9fb;
}
.orderTable td.el-table__cell {
    border: none;
}
.orderTable .el-table__expanded-cell {
    border-bottom: 1px solid #ebeef5 !important;
}
.orderTable th {
    background-color: #f1f1f1 !important;
}
</style>